<template>
  <view class="ver-layout">
    <swiper class="video-swiper" v-show="!showVideo" :indicator-dots="true">
      <swiper-item v-for="(item,index) in videoList" :key="index">
        <view class="video-image-bg ver-layout-center-all" :style="{backgroundImage:`url(${item.url})`}">
          <image class="myVideo-play" src="@/static/home/ic_video_play.png" @click="showWorkVideo(item)"/>
        </view>
      </swiper-item>
    </swiper>
    <view v-if="showVideo" class="video-player">
      <video class="video-swiper" :src="video" @error="videoErrorCallback"></video>
      <u-icon name="close-circle" color="#fd4646" size="50" class="video-player-close"
              @click="showVideo=false"></u-icon>
    </view>
    <view class="content-layout">
      <view class="homework-time hor-layout-side-center">
        <view>作业提交时间</view>
        <view>{{ homeworkDetails.endtime }}</view>
      </view>
      <view class="flex-grid-layout">
        <image class="homework-image" v-for="(item,index) in homeworkDetails.images" :src="item.url"
             :class="{'right':(index+1)%3===0}" :key="index"/>
      </view>
      <view class="divider-line"></view>
      <view class="homework-desc-title">作业描述</view>
      <view class="homework-content">{{ homeworkDetails.description }}</view>
    </view>
  </view>
</template>

<script>
import {StudentHomeWorkApi} from "@/api/recordStudy.js"

let engine = new StudentHomeWorkApi()
export default {
  name: "homeworkDetail",
  data() {
    return {
      homeworkObj: {},
      video: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
      workGrids: [1, 1, 1, 1, 1, 1, 1, 1],
      homeworkDetails: {},
      showVideo: false
    }
  },
  onLoad(options) {
    this.homeworkObj = options
    this.getHomeWorkDetailPush()
  },
  methods: {
    showWorkVideo() {
      this.showVideo = true
      // this.homeworkDetails.videos.forEach(video => {
      //   video.play = false
      // })
    },
    getHomeWorkDetailPush() {
      engine.getHomeWorkDetailPush(this.homeworkObj.id).then(res => {
        this.homeworkDetails = res.data
        this.videoList = this.homeworkDetails.videos
      })
    },
    showVideo(item) {
      this.videoList.forEach(video => {
        if (video.id === item.id) video.play = true
        else video.play = false
      })
    },
    videoErrorCallback() {

    }
  }
}
</script>

<style scoped>
.video-swiper {
  width: 100%;
  height: 180px;
}

.video-image-bg {
  width: 100%;
  height: 180px;
  background-repeat: repeat;
  background-size: 100% 100%;
}

.myVideo-play {
  width: 48px;
  height: 48px;
}

.video-player {
  position: relative;
  width: 100%;
  height: 180px;
}

.video-player-close {
  position: absolute;
  z-index: 1000;
  right: 10px;
  top: 10px;
}

.content-layout {
  padding: 0px 12px;
}

.homework-time {
  height: 50px;
}

.homework-time > * {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

.homework-image {
  width: calc(100% / 3 - 2px);
  height: 115px;
  margin-right: 3px;
  margin-bottom: 12px;
}

.homework-image.right {
  margin-right: 0px;
}

.divider-line {
  margin-top: 24px;
  width: 100%;
  height: 1px;
  background: #E5E5E5;
}

.homework-desc-title {
  margin-top: 24px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}

.homework-content {
  padding: 12px;
  margin-top: 13px;
  margin-bottom: 60px;
  width: 100%;
  min-height: 119px;
  background: #F2F2F2;
  border-radius: 6px;
  /* 文本样式 */
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
</style>
